Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!doctype html>

<head>

<title>Calculator Pro</title>

</head>

<body>

<div>

</div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

// create a function to update the date and time

function updateDateTime() {

// create a new `Date` object

const now = new Date();

// get the current date and time as a string

const currentDateTime = now.toLocaleString();

// update the `textContent` property of the `span` element with the `id` of `datetime`

document.querySelector('#datetime').textContent = currentDateTime;

}

// call the `updateDateTime` function every second

setInterval(updateDateTime, 1000);

</script>

</body>

</html>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: sans-serif;

}

body{

background-color:rgba(253, 251, 251, 0.316);

}

.container{

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.container .calculator{

background-color: #C4C4C4;

border-radius: 15px;

box-shadow:5px 5px 5px 0px rgba(18, 18, 18, 0.551)

,-5px -5px 2px 0px rgba(246, 243, 243, 0.425);

}

.container .calculator input{

font-size: 30px;

text-decoration: solid;

font-weight: 550;

padding: 10px;

background-color: white;

margin: 5px;

border-radius: 10px;

border: none;

text-align: center;

width: 60px;

height: 60px;

box-shadow:5px 5px 9px 0px rgba(116, 100, 100, 0.551)

,-5px -5px 1px 0px rgb(250, 248, 248);

}

.container .calculator input:hover{

scale: 1.04;

}

#out{

width: 100%;

height: 41.5px;

font-size: 34px;

margin: 0;

color: black;

background-color: #645858;

border-radius: 0;

border-top-left-radius: 3px;

border-top-right-radius: 3px;

box-shadow: none;

text-align: right;

padding-right: 23px;

scale: 1;

}

#delete{

background-color:red;

}

#all-clear{

background-color:red;

}

#seven{

background-color:black;

color:white;

}

#eight{

background-color:black;

color:white;

}

#nine{

background-color:black;

color:white;

}

#four{

background-color:black;

color:white;

}

#five{

background-color:black;

color:white;

}

#six{

background-color:black;

color:white;

}

#one{

background-color:black;

color:white;

}

#two{

background-color:black;

color:white;

}

#three{

background-color:black;

color:white;

}

#zero{

width: 135px;

background-color:black;

color:white;

}

#point{

background-color:black;

color:white;

}

#equal{

background-color:#45E9FF;

color:black;

}

.container .calculator .menu input{

font-size: 25px;

font-weight:700;

}

#time-display{

height: 9vh;

width: 14vh;

text-align: center;

font-size: 12px;

font-weight: 350;

padding: 10px;

margin: 5px;

border-radius: 10px;

border: 10;

color: black;

background-color: #A5A0A0;

}

#set-keys{

height: 6vh;

width: 6vh;

text-align: center;

margin: 5px;

font-size: 12px;

font-weight: 1000;

padding: 10px;

border-radius: 100px;

border: 50;

color: blue;

background-color: gold;

}

Frontend Forever App